import { FC } from 'react';
import ReactMarkDown from 'react-markdown'
import SyntaxHighlighter from 'react-syntax-highlighter';
import *  as highlighterStyle from 'react-syntax-highlighter/dist/esm/styles/hljs';
import remarkGfm from 'remark-gfm'
import styles from './styles.module.less'

const AppMarkdown: FC<{
  children: string
}> = (props) => {
  return (
    <div className={styles.AppMarkdown}>
      <ReactMarkDown
        remarkPlugins={[remarkGfm]}
        components={{
          h1: ({ node, children, ...props }) => {
            return (
              <h1 style={{ marginBottom: 12 }}>
                {children}
              </h1>
            )
          },
          h2: ({ node, children, ...props }) => {
            return (
              <h2 style={{ marginTop: 28, marginBottom: 12 }}>
                {children}
              </h2>
            )
          },
          h3: ({ node, children, ...props }) => {
            return (
              <h3 style={{ marginTop: 24, marginBottom: 12 }}>
                {children}
              </h3>
            )
          },
          h4: ({ node, children, ...props }) => {
            return (
              <h4 style={{ marginTop: 20, marginBottom: 12 }}>
                {children}
              </h4>
            )
          },
          li: ({ node, children, ...props }) => {
            return (
              <li style={{ padding: '8px 0', listStyleType: 'revert' }}>
                {children}
              </li>
            )
          },
          ul: ({ node, children, ...props }) => {
            return (
              <ul style={{ marginTop: 12, listStyleType: 'revert', paddingLeft: 30 }}>
                {children}
              </ul>
            )
          },
          ol: ({ node, children, ...props }) => {
            return (
              <ol style={{ marginTop: 12, listStyleType: 'revert', paddingLeft: 30 }}>
                {children}
              </ol>
            )
          },
          blockquote: ({ node, children, ...props }) => {
            return (
              <blockquote
                style={{
                  margin: 0,
                  background: '#eee',
                  padding: '8px 16px',
                  borderLeft: '6px solid #ccc'
                }}
              >
                {children}
              </blockquote>
            )
          },
          code({ node, inline, className, children, ...props }) {
            const match = /language-(\w+)/.exec(className || '')?.[0]

            return !inline && match ? (
              <SyntaxHighlighter
                children={String(children)
                  .replace(/\x20{10}/g, '')
                  .replace(/^\n|\n$/g, '')
                }
                style={{
                  ...highlighterStyle.github as any,
                }}
                customStyle={{
                  padding: 16
                }}
                language={match[1]}
                PreTag="div"
                {...props}
              />
            ) : (
              <code className={className} {...props}>
                {children}
              </code>
            )
          }
        }}
      >
        {props?.children}
      </ReactMarkDown>
    </div>

  )
}
export default AppMarkdown